<template>
    <view class="container">
        <!-- 顶部标题 -->
        <view class="header">
            <text class="header-title">我的足迹</text>
        </view>

        <!-- 日期选择器 -->
        <view class="date-picker">
            <picker mode="date" :value="selectedDate" @change="onDateChange">
                <view class="picker-content">
                    <text class="date-text">{{ selectedDate || '请选择日期' }}</text>
                    <text class="picker-icon">▼</text>
                </view>
            </picker>
        </view>

        <!-- 统计信息展示 -->
        <view class="stats-container" v-if="hasData">
            <view class="total-stats">
                <text class="stats-title">今日收藏总数</text>
                <text class="stats-number">{{ totalCount }}</text>
            </view>

            <!-- 分类统计 -->
            <view class="category-stats">
                <text class="category-title">分类统计</text>
                <view class="category-list">
                    <view v-for="(count, category) in categoryStats" :key="category" class="category-item">
                        <text class="category-name">{{ category }}</text>
                        <text class="category-count">{{ count }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 无数据提示 -->
        <view v-else class="no-data">
            <text class="no-data-text">该日期暂无收藏记录</text>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            selectedDate: '', // 选中的日期
            totalCount: 0, // 总收藏数
            categoryStats: {}, // 分类统计
            hasData: false // 是否有数据
        };
    },
    onLoad() {
        // 初始化为今天的日期
        const today = new Date();
        this.selectedDate = this.formatDate(today);
    },
    onShow() {
        // 页面显示时加载足迹数据
        this.loadFootprints();
    },
    methods: {
        // 日期选择器变化事件
        onDateChange(e) {
            this.selectedDate = e.detail.value;
            this.loadFootprints();
        },
        
        // 加载足迹数据
        loadFootprints() {
            const favorites = uni.getStorageSync('favorites') || [];
            
            // 过滤选中日期的收藏
            const dayFavorites = favorites.filter(item => {
                const itemDate = this.formatDate(new Date(item.time));
                return itemDate === this.selectedDate;
            });

            // 计算总数
            this.totalCount = dayFavorites.length;
            
            // 计算各分类数量
            this.categoryStats = dayFavorites.reduce((acc, curr) => {
                const category = curr.category;
                acc[category] = (acc[category] || 0) + 1;
                return acc;
            }, {});

            this.hasData = this.totalCount > 0;
        },

        // 格式化日期为 YYYY-MM-DD
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
    }
};
</script>

<style scoped>
.container {
    background-color: #f7f8fa;
    min-height: 100vh;
    padding: 20rpx;
}

.header {
    text-align: center;
    margin-bottom: 30rpx;
}

.header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #7e57c2;
}

.date-picker {
    background: #fff;
    padding: 20rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.picker-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx;
}

.date-text {
    font-size: 28rpx;
    color: #333;
}

.picker-icon {
    font-size: 24rpx;
    color: #7e57c2;
}

.stats-container {
    background: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.total-stats {
    text-align: center;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
}

.stats-title {
    font-size: 28rpx;
    color: #666;
}

.stats-number {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #7e57c2;
    margin-top: 10rpx;
}

.category-stats {
    padding: 20rpx 0;
}

.category-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 20rpx;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 15rpx;
}

.category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx;
    background: #f8f8f8;
    border-radius: 8rpx;
}

.category-name {
    font-size: 26rpx;
    color: #333;
}

.category-count {
    font-size: 26rpx;
    color: #7e57c2;
    font-weight: bold;
}

.no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-top: 20rpx;
}

.no-data-text {
    font-size: 28rpx;
    color: #999;
}
</style>
